<template>
	<view class="container">
		<!-- 轮播正在上映图片 -->
		<view class="bannerList">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="1500">
				<swiper-item v-for="(item, index) in nowPlayingList.subjects" :key="index">
					<image mode="widthFix" class="slider" :src="item.images.small" @click="toDtails(item.id)"/>
				</swiper-item>
			</swiper>
		</view>
		<view class="list-container">
			<!-- 分别遍历，正在上映，即将上映，推荐三部分影片 -->
			<view class="list" v-for="(item,index) in moviesList" :key="index">
				<view class="title">
					{{item.title}} 
					<text @click="toClass(item.title)" class="icon"> &#xe637; </text> 
				</view>
				 <scroll-view scroll-x="true" style="white-space: nowrap;">
				  <view class="slider" v-for="(it, idx) in item.subjects" :key="idx">
					  <image mode="aspectFill" :src="it.images.small" @click="toDtails(it.id)"/>
					  <view class="name"> {{ it.title }} </view>
				  </view>
				</scroll-view> 
			</view> 
		</view>

	</view>
</template>

<script>
	import {comingSoon,newMovies,top250} from "../../apis"
	export default {
		data() {
			return {
				moviesList:[]
			}
		},
		onReady(){
			// 调用接口方法
			this.pageInit();
		},
		computed:{
			// 监听用户城市
			nowPlayingList(){
				return this.$store.state.nowPlayingList;		
			}
		},
		methods: {
			// 接口方法
			pageInit(){
				uni.showLoading({
				    title: '加载中'
				});
				Promise.all([
					this._comingSoon(),
					this._newMovies(),
					this._top250()
					]).then((res)=>{
						uni.hideLoading();
						let rel=[];
						res.map((item)=>{
							rel.push(item[1].data)
						})
						this.moviesList=rel;
					})
			},
			// 带影片id跳转至详情页
			toDtails(id){
				uni.navigateTo({
					url:"../detail/detail?id=" + id
				})
			},
			// 带分类标题跳转至分类页面
			toClass(title){
				uni.navigateTo({
					url:"../class/class?title=" + title
				})
			},
			_comingSoon(){
				return comingSoon({
					city:this.$store.state.city,
					start:"0",
					count:"8"
				})
			},
			_newMovies(){
				return 	newMovies({
					city:this.$store.state.city,
					start:"0",
					count:"8"
				})
			},
			_top250(){
				return top250({
					city:this.$store.state.city,
					start:"0",
					count:"8"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	background:#F5F5F5;
	.bannerList{
		.swiper{
			height:400upx;
			.slider{
					width:100%;
				   }
		}
	}
	.list-container{
		margin-top: 30upx;
		background-color: #FFFFFF;
		.list{
			margin-top: 10upx;
			background:#FFFFFF;
			.title{
				color: #2E2E2E;
				margin-left :20upx;
				padding: 5px 0 10px 0;
				font-size: 18px;
				font-weight: bold;
				text{
					float:right;
					padding:0 10upx;
				}
			}
			.slider{
				width: 180upx;
				margin-left:20upx;
				display:inline-block;
				text-overflow:ellipsis;
				image{
					width: 100%;
					height:300upx;
				}
				.name{
					padding: 10upx 0;
					color:#0A0A0A;
					overflow: hidden;
					text-overflow: ellipsis;		
					white-space: nowrap;
				}
			}
		}
	}
}
</style>
